<template>
	<view style="background-color: #fff;">
		<view id="filter-box" style="display: flex;
			align-items: center;font-size: 28rpx;border-bottom: 5px solid #f7f7f7;">
			<picker @change="(e)=>{
				pickers.dateDictCurIndex = e.detail.value
			}" :value="pickers.dateDictCurIndex" :range="pickers.dateDict" range-key="label">
				<view style="color:#4e77cf;display: flex;align-items: center;padding: 10rpx 20rpx;">
					<text>{{pickers.dateDict[pickers.dateDictCurIndex].label}}</text>
					<up-icon style="margin-left: 4rpx;" name="arrow-down-fill" color="#4e77cf"
						size="10"></up-icon>
				</view>
			</picker>
			<picker @change="(e)=>{
				pickers.outDictCurIndex = e.detail.value
			}" :value="pickers.outDictCurIndex" :range="pickers.outDict" range-key="label">
				<view :style="{color:pickers.outDictCurIndex==-1?'':'#4e77cf'}"
					style="display: flex;align-items: center;padding: 10rpx 20rpx;">
					<text>{{pickers.outDictCurIndex==-1?'调出库':pickers.outDict[pickers.outDictCurIndex].label}}</text>
					<up-icon style="margin-left: 4rpx;" name="arrow-down-fill"
						:color="pickers.outDictCurIndex==-1?'':'#4e77cf'" size="10"></up-icon>
				</view>
			</picker>

			<picker @change="(e)=>{
				pickers.inDictCurIndex = e.detail.value
			}" :value="pickers.inDictCurIndex" :range="pickers.inDict" range-key="label">
				<view :style="{color:pickers.inDictCurIndex==-1?'':'#4e77cf'}"
					style="display: flex;align-items: center;padding: 10rpx 20rpx;">
					<text>{{pickers.inDictCurIndex==-1?'调出库':pickers.inDict[pickers.inDictCurIndex].label}}</text>
					<up-icon style="margin-left: 4rpx;" name="arrow-down-fill"
						:color="pickers.inDictCurIndex==-1?'':'#4e77cf'" size="10"></up-icon>
				</view>
			</picker>

			<view @click="resetFilter" style="margin-left: auto;margin-right: 20rpx;color:#f85c81">
				重置
			</view>
		</view>

		<view :style="{height:mainBoxHeight-filterBoxHeight+'px'}">
			<view v-if="list.length === 0"
				style="height:100%;display: flex;justify-content: center;align-items: center;">
				<up-empty mode="data" icon="data"></up-empty>
			</view>
			<scroll-view v-else @scrolltolower="scrolltolower" style="height:100%" scroll-y>
				<view @click="itemClick(item)" v-for="(item, index) in list" :key="index"
					style="position: relative;padding: 20rpx;border-bottom: 1px solid #dcdfe6;">
					<view style="font-weight: bold;display: flex;justify-content: space-between;">
						<view style="display: flex;align-items: center;">
							<text>{{item.whout_name}}</text>
							<up-icon style="margin-left: 20rpx;" name="arrow-right" color="#000"
								size="24"></up-icon>
							<text style="margin-left: 20rpx;">{{item.whin_name}}</text>
						</view>
						<text>{{item.ownername}}</text>
					</view>
					<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
						{{item.moveid + " " + item.ownername}}
					</view>
					<view style="margin-top: 10rpx;color:#75747c;font-size: 28rpx;">
						单据时间：{{item.shtime}}
					</view>
					<view style="position: absolute;bottom:20rpx;right:20rpx">
						<up-tag :text="item.statu" plain size="mini"
							:type="getTagType(item)"></up-tag>
					</view>
				</view>
				<up-loadmore :status="status" />
				<view style="height: 20rpx;"></view>
			</scroll-view>
		</view>



	</view>
</template>

<script setup>
	import timeUtils from '@/utils/time.js'
	import { timeFormat } from '@/uni_modules/uview-plus';
	import { ref, reactive, watch, computed, onMounted, nextTick } from 'vue'
	import { onReady, onLoad } from "@dcloudio/uni-app"
	import { useStore } from "vuex";
	const store = useStore();
	const app = getApp()

	const mainBoxHeight = ref(0) // 页面布局相关变量
	const filterBoxHeight = ref(0) // 页面布局相关变量
	const date = new Date()
	const todayStr = timeFormat(date, 'yyyy-mm-dd')
	const pickers = reactive({
		dateDictCurIndex: 0,
		dateDict: [
			{ 'label': '今日', 'value': [todayStr, todayStr] },
			{ 'label': '近30天', 'value': [timeUtils.getNDaysAgo(date, 30), todayStr] },
		],
		outDictCurIndex: -1,
		outDict: [],
		inDictCurIndex: -1,
		inDict: [],
	})

	const status = ref('nomore');
	const list = ref([]);


	onMounted(async () => {
		uni.createSelectorQuery().select('#filter-box').boundingClientRect(b_data => {
			filterBoxHeight.value = b_data.height
		}).exec()
	})

	onLoad(async (options) => {
		const res = await app.globalData.http.get("/warehouse/dict")
		pickers.outDict = res.data
		pickers.inDict = res.data
		loadmore();
	})

	watch(() => pickers.dateDictCurIndex, (newVal, oldVal) => {
		console.log('dateDictCurIndex 变化:', { newVal, oldVal })
		list.value = []
		loadmore();
	}, {
		immediate: false // 立即执行一次
	})

	watch(() => pickers.outDictCurIndex, (newVal, oldVal) => {
		console.log('outDictCurIndex 变化:', { newVal, oldVal })
		list.value = []
		loadmore();
	}, {
		immediate: false // 立即执行一次
	})

	watch(() => pickers.inDictCurIndex, (newVal, oldVal) => {
		console.log('inDictCurIndex 变化:', { newVal, oldVal })
		list.value = []
		loadmore();
	}, {
		immediate: false // 立即执行一次
	})

	// 设置组件高度
	const setMainBoxHeight = (height) => {
		mainBoxHeight.value = height
	}

	// 选择客户
	const toSelectCusPage = () => {
		uni.navigateTo({
			url: '/pages/selectCus'
		})
	}

	const itemClick = (item) => {
		uni.navigateTo({
			url: `/pageCarSale/carSaleOrderDetail?id=${item.saleid}`
		})
	};

	// 状态颜色
	const getTagType = (item) => {
		if (item.statu == '待审核') {
			return 'warning'
		} else if (item.statu == '已审核') {
			return 'success'
		}
	}

	// 重置搜索
	const resetFilter = () => {
		nextTick(() => {
			pickers.outDictCurIndex = -1;
			pickers.inDictCurIndex = -1;
			pickers.dateDictCurIndex = 0
		});
	}

	// 滚动加载
	const scrolltolower = () => {};
	// 请求数据
	const loadmore = async () => {
		list.value = []
		const whoutid = pickers.outDictCurIndex == -1 ? null : pickers.outDict[pickers
			.outDictCurIndex].value
		const whinid = pickers.inDictCurIndex == -1 ? null : pickers.inDict[pickers
			.inDictCurIndex].value
		const params = {
			whoutid: whoutid,
			whinid: whinid,
			start_date: pickers.dateDict[pickers.dateDictCurIndex].value[0],
			end_date: pickers.dateDict[pickers.dateDictCurIndex].value[1]
		}
		const res = await app.globalData.http.get(
			`/move/list-all${app.globalData.queryParams(params, true, 'comma')}`)
		list.value = res.data
	};


	defineExpose({ setMainBoxHeight }); // 暴露方法
</script>

<style>
</style>